# Stylus 插件

import { SourceCode } from '@rspress/core/theme';

<SourceCode href="https://github.com/web-infra-dev/rsbuild/tree/main/packages/plugin-stylus" />

[Stylus](https://stylus-lang.com/) 是一个富于表现力、动态的、健壮的 CSS 预处理器；通过 Stylus 插件，你可以使用 Stylus 作为 CSS 预处理器。

## 快速开始

### 安装插件

你可以通过如下的命令安装插件:

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs command="add @rsbuild/plugin-stylus -D" />

### 注册插件

你可以在 `rsbuild.config.ts` 文件中注册插件：

```ts title="rsbuild.config.ts"
import { pluginStylus } from '@rsbuild/plugin-stylus';

export default {
  plugins: [pluginStylus()],
};
```

## 示例

注册插件后，你可以在代码中引入 `*.styl`，`*.stylus`，`*.module.styl` 或 `*.module.stylus` 文件，无须添加其他配置。

- `normalize.styl`:

```styl
body
  color #000
  font 14px Arial, sans-serif
```

- `title.module.styl`:

```styl
.title
  font-size: 14px;
```

- `index.js`:

```js
import './normalize.styl';
import style from './title.module.styl';

console.log(style.title);
```

## 选项

如果你需要自定义 Stylus 的编译行为，可以使用以下配置项。

### stylusOptions

- **类型：**

```ts
type StylusOptions = {
  use?: string[];
  define?: [string, any, boolean?][];
  include?: string[];
  includeCSS?: boolean;
  import?: string[];
  resolveURL?: boolean;
  lineNumbers?: boolean;
  hoistAtrules?: boolean;
};
```

- **默认值：** `undefined`

传递给 Stylus 的选项，请查阅 [Stylus 文档](https://stylus-lang.com/docs/js) 来了解具体用法。

```ts
pluginStylus({
  stylusOptions: {
    lineNumbers: false,
  },
});
```

### sourceMap

- **类型：** `boolean`
- **默认值：** 与 [output.sourceMap.css](/config/output/source-map) 一致

是否生成 source map 文件。

```ts
pluginStylus({
  sourceMap: false,
});
```
